第五堂 - Flex Panel Gallery - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 6

自我挑戰組

JS30自我學習筆記系列第 6 篇

第五堂 - Flex Panel Gallery

2019鐵人賽

hank8124

團隊這樣母Tom姆熊

2018-10-21 11:26:53

1535 瀏覽

分享至

今天的課程要實作的是一個非常"snazzy"的介面(在第0堂課有提到上JS30可以順便練英文，snazzy意指時髦的、華麗而俗氣的)。實作範例連結如下：

而這堂課可以說是上到目前為止對我最有幫助的一堂，因為在這之前我對於排版真的是極度不熟悉，可以說是零基礎，就連想要把東西置中都要弄半天，示意圖如下：

但CSS真的是一門很深的學問，而我只是個CSS小小初心者，所以下面的說明我只會用我這堂課所學的粗淺知識，來介紹各個CSS名詞或技巧。若想要深入了解的同學，可以到下面參考來源的網站，裡面都有很詳細的說明。

邏輯流程

利用flex及置中排版，將照片水平排列，並使文字上下各占三分之一
預設上下方文字在畫面外，加入指定class時回到畫面中
監聽panel的click事件及transitionend事件，分別給予指定class

課程重點

flex：是這個實作最重要的屬性，但真的要認真介紹需要非常多的篇幅，所以我這邊這以課程所用到的部分說明。

flex算是一種容器，全名叫flexbox，顧名思義，是個相當有彈性的布局方式。若指定一個區塊的style屬性display:flex，這時區塊就變成了flexbox，裡面的子區塊就能夠以flex的屬性來佈局。

例如下列HTML及其CSS，panels的CSS屬性有display:flex，panels就是flex容器，裡面的panel就能用flex設定各個panel佔的比重。範例說明原本flex都是1，加入open類別後，該panel的flex設定成5，就有點下去區塊變寬的效果。

align-items和justify-content設定center可以很輕易讓元素置中。而panel本身加上display:flex也可以讓他自己成為flexbox裡的flexbos。flex-direction是決定flexbox內的排列方向，這邊使用column會使預設的水平變垂直。
```
<div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
</div>
```
```
.panels {
	min-height: 100vh;
	overflow: hidden;
	display: flex;
}
.panel {
      flex: 1;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
}
.panel.open {
  font-size: 40px;
  flex: 5;
}
```

translateY()：這是CSS transform的一個函式，能夠調整區塊Y方向的位置。在實作中translateY是用來調整滑鼠點選後，上下文字滑進與滑出的位置，如下：

.panel>*:first-child{transform: translateY(-100%);}
.panel.open-active>*:first-child{transform: translateY(0);}
.panel>*:last-child{transform: translateY(100%);}
.panel.open-active>*:last-child{transform: translateY(0);}

classList.toggle()：像是個開關的功能，用來增加或移除物件的屬性。在實作中用來對panel做open class的開關。

panels.forEach(panel => panel.addEventListener('click',toggleOpen));

function toggleOpen() {
    this.classList.toggle('open');
}

延伸閱讀

CSS選擇器：
1. 星號：實作中我們會在CSS中看到星號*，代表所有的元素，可以聯想到SQL select *中的星號也是選擇全部的意思。
2. 大於：>是選擇該物件底下"直接的元素"，例如：.class>p{style...}就是class底下的所有直接的P元素，那假如這時候class底下的P元素被其他元素包住，如<div>那就不算直接的元素，所以這種時候P不會被選擇。
3. 空格：承上例，假如是.class p{style...}，這時就是選擇class底下所有P元素，無論直接或間接。
4. 加號：+是選擇與該物件同層級的"後面第一個"元素。
5. 波浪號：~是選擇與該物件同層級的"後面全部"元素。
6. 沒有空格：當兩個物件之間沒有空格，如p.class{style...}代表該區塊要同時符合兩個條件才會被選擇。
7. 逗號：,代表"或"條件。只要符合其中一個就會被選擇。
CSS多個字型：實作中panel的p的文字設定是font-family: 'Amatic SC', cursive;。他設定了超過一種字型，用意是當瀏覽器抓不到第一種字型的時候會自動往下一個抓。

::before、::after：偽元素，並不是真正實體元素。直接看範例：

div::before {
  content: "我是 before";
  color: red;
}

div::after {
  content: "我是 after";
  color: red;
}
<div>
我是原始div
</div>
``
出來的結果會長這樣![](https://i.imgur.com/i3KTqk9.jpg)
外還有偽類，欲知詳情請至下方參考來源。